<template>
  <div class="upload-dialog">

    <div style="margin-bottom: 30px;" v-if="upload_contract_list.length > 0">
      <div>已上传的文件</div>
      <div class="file-container" v-for="(item,index) in upload_contract_list">
        <span @click="openContract(item.url)" class="file-item">{{item.name}}</span>
      </div>
    </div>

    <el-upload
      class="upload-demo"
      :action="$uploadContractApi"
      name="file"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="successUpload"
      multiple
      :limit="10"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :headers="headers">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip"></div>
    </el-upload>

    <div style="margin-top: 8px;text-align: center">
      <el-button size="small" v-if="templateFileList.length > 0" type="primary" @click="setOrderContract">确定</el-button>
    </div>

  </div>
</template>

<script>
  export default {
    name: "upload_clue",
    data() {
      return{
        uploadErrorMessage: '',
        fileList: [],
        headers: {},
        templateFileList: []
      }
    },
    props: {
      uploadDialogShow: '',
      upload_order_id: '',
      upload_contract_list: ''
    },
    watch: {
      uploadDialogShow(val) {
        if (val) {
          this.uploadErrorMessage = ''
          this.fileList = []
        }
      },
      upload_contract_list(val) {
        this.updateFileListData(val)
      }
    },
    mounted() {
      const token = window.localStorage.getItem("user_token")
      this.headers = {
        "Admin-token": token
      }
      this.updateFileListData(this.upload_contract_list)
    },
    methods:{

      openContract(url) {
        if (!url) {
          return
        }
        window.open(url);
      },

      updateFileListData(val = []) {
        if (val) {
          console.log('看看吧',val)
          this.fileList = val.map(item => {
            return {
              name: item.name,
              url: item.url,
              id: item.id
            }
          });
          this.templateFileList = val.map(item => {
            return {
              name: item.name,
              url: item.url,
              id: item.id
            }
          });
        }
      },

      handleData(fileList = []) {
        this.templateFileList = fileList.map(item => {
          if (item.response) {
            return item.response.data;
          }
          return item;
        });
      },

      successUpload(response, file, fileList) {
        this.handleData(fileList)
        console.log('上传成功后的数据',fileList)
      },

      handleRemove(file, fileList) {
        console.log('移除后的文件信息',fileList);
        this.handleData(fileList)
      },

      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },

      async setOrderContract() {
        if (!this.upload_order_id) {
          this.$message.error('订单ID未获取到')
          return
        }
        const contract_ids = this.templateFileList.map(item => {
          return item.id
        });
        let params = {
          order_id: this.upload_order_id,
          contract_ids
        }
        const res = await this.$api.setOrderContract(params)
        if (res.data.level == 'success') {
          this.$message.success(res.data.message)
          this.$emit('hideUploadDialog')
        } else {
          this.$message.error(res.data.message)
        }
      }

    }
  };
</script>

<style scoped>
  .upload-dialog .detail{
    padding-bottom: 20px;
  }

  .upload-dialog .detail div{
    line-height: 30px;
  }

  .error-tip{
    color: red;
    margin-top: 15px;
  }

  .file-container{
    display: flex;
    flex-direction: column;
  }

  .file-item{
    margin-top: 15px;
    color: #00a0e9;
    font-size: 14px;
    cursor: pointer;
  }

</style>
